<template>
  <div id="center-page" v-if="shopInfo.id>0" :style="{height:(this.getWinSize().height-this.getSafeArea().top8)+'px'}">
    <!--会员信息区域-->
    <div id="user-info-box">
      <i id="setup-button" class="el-icon-setting" @click="$router.push('/MemberInfo')"></i>
      <!--会员头像-->
      <div id="icon-box">
        <img :src="shopInfo.logo" alt="">
        <div id="nickname" v-text="shopInfo.name+''"></div>
      </div>
      <div class="address-info ovd_s" v-text="shopInfo.addressDetail" style="height: 25px; line-height: 25px; max-width: 95%"></div>
      <div class="business-box">
        <div class="item">
          <div class="name">营业时间:</div>
          <div class="value">{{ shopInfo.businessTime.join('~') }}</div>
          <div class="c"></div>
        </div>
        <div class="item">
          <div class="name">营业状态:</div>
          <div class="value" v-if="shopInfo.businessStatus && shopInfo.businessStatus.id>-1">
            <el-tag type="info" v-if="shopInfo.businessStatus.id!==1" v-text="shopInfo.businessStatus.name"></el-tag>
            <el-tag type="success" v-if="shopInfo.businessStatus.id===1" v-text="shopInfo.businessStatus.name"></el-tag>
          </div>
          <div class="c"></div>
        </div>
      </div>
      <!--其他信息-->
      <div id="clerk-box">
        <div class="item">
          <div class="name">账号: </div>
          <div class="value">
            <span v-text="CurrUser.Username"></span>
          </div>
          <div class="c"></div>
        </div>


        <div class="item">
          <div class="name">角色: </div>
          <div class="value">
            <span v-text="shopInfo.role.roleName"></span>
          </div>
          <div class="c"></div>
        </div>

        <div class="item">
          <div class="name">头像: </div>
          <div class="value">
            <el-image
              style="width: 30px; height: 30px;text-indent: 0; border-radius: 50%;"
              fit="fill"
              :src="shopInfo.clerk.icon"
              :preview-src-list="[shopInfo.clerk.icon]">
            </el-image>
          </div>
          <div class="c"></div>
        </div>

        <div class="item">
          <div class="name">姓名: </div>
          <div class="value">
            <span class="ovd_s" style="display: inline-block; max-width: 100px;" v-text="shopInfo.clerk.nickname"></span>
          </div>
          <div class="c"></div>
        </div>
        <div class="c"></div>

      </div>
    </div>


    <div style="position: relative; overflow-x: hidden; overflow-y: auto;" :style="{
      height: (this.getWinSize().height-this.getSafeArea().top-350)+'px'
    }">

    <!--菜单2-->
    <div class="menu-box">
      <div class="item" @click="$router.push('/ChatList')">
        <div class="name">
          聊天会话
          <span class="un-read-session-nums" v-text="unReadSessionNums" v-if="unReadSessionNums>0"></span>
        </div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>


      <div class="item" @click="$router.push('/MemberChangePassword')">
        <div class="name">修改密码</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="$router.push('/MemberAddressList')">
        <div class="name">地址管理</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="contactSystemUser">
        <div class="name">联系平台</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="showPrivacyAgreementDialog">
        <div class="name">隐私协议</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="checkAppVersion">
        <div class="name">当前版本(<span style="font-size: 12px; font-weight: bold; color: #cc3a3a;" v-text="appVersion"></span>)</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="loginOut">
        <div class="name">退出登陆</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>

    </div>

    <my-privacy-agreement-dialog ref="my-privacy-agreement-dialog" />
  </div>
</template>

<script>
import ProductListItem from '../common/ProductListItem'
import MyPrivacyAgreementDialog from '../common/MyPrivacyAgreementDialog'

export default {
  name: 'Center',
  components: {MyPrivacyAgreementDialog, ProductListItem},
  mounted () {
    let $this=this
    setTimeout(function () {
      $this.getInfo()
    },300)
    $this.getUnReadSessionNums()
    // this.getProductList()

  },
  data: function () {
    return {
      appVersion:'v0.0.1',
      unReadSessionNums:0,
      shopInfo: {
        "id": 0,
        "role": {
          "roleName": "店铺-超管",
          "id": "Admin"
        },
        "clerk": {
          "id": 7,
          "userId": 52,
          "shopId": 7,
          "nickname": "乔乔",
          "icon": "http://image.yangfankj.com/icon/23.png",
          "sex": "女",
          "role": "Admin",
          "isDefaultChatUser": null,
          "createdTime": null
        },
        "number": "",
        "name": "",
        "logo": "",
        "classifyName": [
          "生活超市"
        ],
        "bannerArr": [],
        "province": "陕西省",
        "city": "西安市",
        "cityCode": "029",
        "county": "长安区",
        "address": "韦曲街道西安爱月儿母婴护理GOGO街区",
        "addressDetail": "陕西省,西安市,长安区 韦曲街道西安爱月儿母婴护理GOGO街区",
        "location": [
          "108.912233",
          "34.158586"
        ],
        "mobile": "18933633331",
        "createdTime": "22-07-25 10:51",
        "status": {
          "name": "正常",
          "id": 1
        },
        "isSameCitySend": 1,
        "productNums": 4,
        "collectNums": 3,
        "score": 80,
        "expressScore": 80,
        "businessStatus": {

        },
        "businessTime": [
          "07:45",
          "21:45"
        ],
        "expressPrice": 0,
        "freeExpressPrice": 51,
        "fullMinusPrice": [
          {
            "minus": 10,
            "full": 99
          },
          {
            "minus": 25,
            "full": 200
          },
          {
            "minus": 50,
            "full": 300
          }
        ],
        "businessStopInfo": "",
        "clerkNums": 7,
        "updateStatus": 0
      },
      productList: [],
    }
  },
  methods: {
    loginOut:function () {
      let $this=this
      this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提示', {
        customClass:'my-confirm-box',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        backType: 'warning'
      }).then(() => {

        $this.MyRequest($this.ApiDoNameAuth + 'User/loginOut', {}, function (data) {
          $this.loading=false
          $this.$forceUpdate()
        }, function (msg) {
          $this.loading=false
          // $this.$message.error(msg)
        })
        setTimeout(function () {
          $this.CurrUser.setCache(null)
          window.location.reload()
        },500)
      }).catch(() => {

      });
    },
    checkAppVersion:function () {

    },
    // 展示隐私协议
    showPrivacyAgreementDialog:function () {
      this.$refs['my-privacy-agreement-dialog'].open(true)
    },
    contactSystemUser:function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Home/checkAndGetMessageSession', {toUserType: "SysUser",toMainId:1}, function (data) {
        if (data && data.id){
          $this.$router.push({
            name:'Chat',
            query:{
              chatSessionId:data.id
            }
          })
        }
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
    // 获取-个人信息
    getInfo: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Shop/info', {}, function (data) {
        $this.shopInfo.id=data.id
        $this.shopInfo.name=data.name
        $this.shopInfo.logo=data.logo
        $this.shopInfo.clerk.icon=data.clerk.icon
        $this.shopInfo.clerk.nickname=data.clerk.nickname
        $this.shopInfo.role=data.role
        $this.shopInfo.addressDetail=data.addressDetail
        $this.shopInfo.businessTime=data.businessTime
        $this.shopInfo.businessStatus=data.businessStatus
        // console.log('data', data)
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
    // 获取-未读会话-数量
    getUnReadSessionNums: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Home/getUnReadSessionNums', {}, function (data) {
        $this.unReadSessionNums=data
        // console.log('data', data)
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
    // 获取-商品列表
    getProductList: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'ShopProduct/getList', {
        sortProp: 'saleNums',
        sortOrder: 'DESC',
        pageSize: 10,
      }, function (data) {
        $this.productList = data.list
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    }
  }
}
</script>

<style scoped>

</style>
